Day5:JS計數器應用

11th鐵人賽

vanilla666

團隊NUTC_IMAC_BLUE

2019-09-21 07:48:35

3445 瀏覽

分享至

今日目的

今天要用js做一個計數器，我們之後會為了這個計數器慢慢加上其他功能，今天只做開始倒數的計數器，
我們今天還會教用按鈕觸發事件，觸發事件可以有很多種，我們慢慢會用到其他種

首先加入html標籤

請把標籤加在body內，我們新增一個div，而且要新增id屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS計數器應用</title>

</head>
<body>

    <div id="count"> </div>

    <script>

    </script>
</body>
</html>

加入觸發事件

之後新增一個按鈕標籤同時增加一個js函數，像以下這樣，按鈕按下去會在F12可以看到結果!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS計數器應用</title>

</head>
<body>

    <div id="count"> </div>
    <button onclick="start()">請點我</button>
    <script>
        function start(){
            console.log('Hello!');
        }
    </script>
</body>
</html>

像這樣

目前到這裡就有成功用按鈕觸發console.log()，接下來之後要開始新增計數器開始計算

計數器開始計算

首先新增開始計算的函數裡面會調用 setInterval( 函數名 , 每毫秒計算 1000毫秒 = 1秒)，這裡先不用點及按鈕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS計數器應用</title>

</head>
<body>

    <div id="count"> </div>
    <button onclick="start()">請點我</button>
    <script>
        var startcalc; 

        
        function start() { //開始計算
            startcalc = setInterval(calc, 100)// 不停地調用calc函數 每0.1秒觸發
        }



    </script>
</body>
</html>

之後新增calc函數開始計算數字，還有數到特定數字停下的stopcalc函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS計數器應用</title>

</head>
<body>

    <div id="count"> </div>
    <button onclick="start()">請點我</button>
    <script>
        var startcalc; 
        var i = 0; //累加用

        function calc(){
            document.getElementById("count").innerHTML = i; /* 把文字貼上到 div id 為 count  */
            i++; 
            if(i == 101 ){ // 一個 = 是給值 二個 == 是判斷 
                i = 0; // i算到101時 i歸0
                stopcalc(); //停止時間計算
            }
        }
        
        function start() { //開始計算
            startcalc = setInterval(calc, 100)// 不停地調用calc函數 每0.1秒觸發
        }

        function stopcalc() {
            clearInterval(startcalc); //停止調用函數 
        }

    </script>
</body>
</html>

如果都完成後，就可以開始計算了，如下圖